<template>
  <div class="_p5 _flex-y _over-hidden _wrapper">
    <div
      class="_flex _flex-space-x _flex-start _wrapper-x _over-hidden _flex-a-stretch"
    >
      <!-- <div
        class="_background-1 _line-height-20 _m-r-0"
        v-copyClipboard="dataCode"
      >
        {{ dataCode }}
      </div> -->
      <div class="_flex-item-1 _over-hidden">
        <el-menu
          :default-active="dataCode"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="changeDataCode"
        >
          <template v-for="menu in menus" :key="menu.menu_id">
            <el-sub-menu :index="menu.menu_id">
              <template #title>{{ menu.text }}</template>
              <template v-if="!menu.children || menu.children.length < 1">
                <el-menu-item :index="menu.menu_id">{{
                  menu.text
                }}</el-menu-item>
              </template>
              <template
                v-else
                v-for="chilMenu in menu.children"
                :key="chilMenu.menu_id"
              >
                <el-menu-item :index="chilMenu.menu_id">{{
                  chilMenu.text
                }}</el-menu-item>
              </template>
            </el-sub-menu>
          </template>
        </el-menu>
      </div>
      <com-data-select @comChange="initDataList()" />
    </div>
    <div
      class="_wrapper-x _cart _m-t-5 _flex-item-1 _over-hidden"
      v-if="dataCode"
    >
      <ListIndex :tableCode="dataCode"></ListIndex>
    </div>
  </div>
</template>

<script>
import ComDataSelect from "@/components/com-data-select/com-data-select.vue";
import ToolHttpClient from "@/tool/http/tool-axios.js";

import ListIndex from "@/views/common/com-data-page.vue";

export default {
  components: { ListIndex, ComDataSelect },
  data() {
    return {
      dataList: [],
      dataCode: undefined,
      menus: [],
    };
  },
  computed: {
    tables() {
      return this.dataList.map((item) => ({
        name: `${item.memo}(${item.name})`,
        val: item.name,
      }));
    },
  },
  mounted() {
    this.initDataList();
  },
  methods: {
    changeDataCode(code) {
      this.dataCode = undefined;
      this.$nextTick(() => {
        this.dataCode = code;
      });
    },
    initDataList() {
      ToolHttpClient.post(`/action/action-table-infos/*`, {
        _dsId: this.$comStore.app.dsId,
      }).then((res) => {
        this.dataList = res;
        this.menus = buildMenus(res);
      });
    },
  },
};

function buildMenus(menus) {
  let parentMenus = [];
  if (!menus) return [];
  menus.forEach(({ name, memo }) => {
    let memoSplit = memo.split("-");

    let nameSplit = name.split("_");
    let pName = nameSplit[0];
    let cName = name.substr(pName.length + 1);

    let pMenu = parentMenus.find((pItem) => pItem.menu_id === pName);

    if (!pMenu) {
      parentMenus.push(
        (pMenu = {
          text: memoSplit[0] || pName,
          children: [],
          menu_id: pName,
        })
      );
      pMenu.children.push({
        text: memoSplit[1] || cName || pName,
        menu_id: name,
        parent_id: pName,
      });
    } else {
      pMenu.children.push({
        text: memoSplit[1] || cName || pName,
        menu_id: name,
        parent_id: pName,
      });
    }
  });
  return parentMenus;
}
</script>

<style>
.dataSourceItem {
  background-color: #eee;
  font-weight: bold;
}
.dataSourceActive {
  border: 1px greenyellow solid;
  background-color: darkseagreen;
  color: #fff;
}
.el-menu-demo {
  height: 34px;
}
</style>
